import React from "react";
import ReactDom from "react-dom";
import Part from "./lesson10.js";
var uuid=require("uuid").v1;

class LRapp extends React.Component{
  constructor(props={list:[]}){
    super(props);
    this.state={
      rightlist:[],
      leftlist:this.props.list
    };
    this.onSelect=this.onSelect.bind(this);
    this.moveLeft=this.moveLeft.bind(this);
    this.moveRight=this.moveRight.bind(this);
  }
//点击右边的元素 时触发的事件=》会更改右边的元素的select =>通过生成组件的时的传入的id属性 (props.list{id,title,})
   onSelect(id){
     let rightlist=this.state.rightlist;
     let leftlist=this.state.leftlist;
       for(let i=0;i<leftlist.length;i++){
         if(this.state.leftlist[i].id === id){
           leftlist[i].selected=!(leftlist[i].selected);
         }
       }

       for(let i=0;i<rightlist.length;i++){
         if(this.state.rightlist[i].id === id){
           rightlist[i].selected=!(rightlist[i].selected);
         }
       }
       this.state.rightlist=rightlist;
       this.state.leftlist=leftlist;
       this.forceUpdate();
   }
    //移动到 leftlist
    //从左到右
    moveLeft(){
      console.log("添加到右边");
      var index=[];
      //这里把被选中的rightlist拿出来
        for(let i=0;i<this.state.leftlist.length;i++){
          if(this.state.leftlist[i].selected){
            this.state.leftlist[i].selected=(!this.state.leftlist[i].selected);
            index.push(this.state.leftlist[i]);
          }
        }
        //这里把被选中的rightlist加入到leftlist中
        for(let i=0;i<index.length;i++){
          this.state.rightlist.push(index[i]);
          this.delLeft(index[i].id);
        }
           this.forceUpdate();//强制刷新，不管state是否更改
    }
    //删除 rightlist
    delRight(id){
      console.log("删除右边");
      let delIndex=null;
      for(let i=0;i<this.state.rightlist.length;i++){
        if(this.state.rightlist[i].id === id){
          delIndex=i;
          break;
        }
      }
      if(delIndex!==null){
        this.state.rightlist.splice(delIndex,1);
      }
    }

//从右到左
    moveRight(){
      console.log("添加到左边");
      var index=[];
      //这里把被选中的rightlist拿出来
        for(let i=0;i<this.state.rightlist.length;i++){
          if(this.state.rightlist[i].selected){
            this.state.rightlist[i].selected=(!this.state.rightlist[i].selected);
            index.push(this.state.rightlist[i]);
          }
        }
        //这里把被选中的rightlist加入到leftlist中
        for(let i=0;i<index.length;i++){
          this.state.leftlist.push(index[i]);
          this.delRight(index[i].id);
        }
           this.forceUpdate();//强制刷新，不管state是否更改
    }
    //删除 leftlist
    delLeft(id){
      console.log("删除左边");
      let delIndex=null;
      for(let i=0;i<this.state.leftlist.length;i++){
        if(this.state.leftlist[i].id === id){
          delIndex=i;
          break;
        }
      }
      if(delIndex!==null){
        this.state.leftlist.splice(delIndex,1);
      }
    }


  render(){
  return  <div>
    <div style={{float:"left"}}>
    <Part list={this.props.list} onSelect={this.onSelect}></Part>
    </div>

    <div style={{float:"left"}}>
    <button onClick={this.moveRight}>&lt;= </button>
    <button onClick={this.moveLeft}>=&gt;</button>
    </div>

    <div style={{float:"left"}}>
    <Part list={this.state.rightlist} onSelect={this.onSelect}></Part>
    </div>

    </div>
  }
}


var list=[{id:uuid(),title:"打野",id:uuid()},{id:uuid(),title:"上单",id:uuid()},{id:uuid(),title:"中单",id:uuid()}];




ReactDom.render(<LRapp list={list}></LRapp>,document.body);
